<template>
  <div class="ChatContent">
    <template v-for="(value, key, index) in getChatMap().value.get(getCurrentChat().value)?.messages">
      <ChatItem :key="value.id" :value="value" :index="index"
        v-if="(chatSettings['base'].template['systemHide'].value && value.role === 'system') || value.role !== 'system'" />
    </template>
  </div>
</template>

<script setup lang='ts'>
const { getCurrentChat, getChatMap } = chatStore()
const { chatSettings } = storeToRefs(chatSettingStore())
</script>

<style lang="scss">
.ChatContent {
  display: flex;
  width: 100%;
  flex-direction: column;
  overflow: auto;
  padding-bottom: 100px;
}
</style>